<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="factoryQueryDto.factoryId" placeholder="请选择工厂"
                   v-if="roleType === '1'">
          <el-option
            v-for="item in factoryOption"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-col :span="10">
            <el-select v-model="factoryQueryDto.provinceCode" clearable placeholder="请选择省份"
                       @change="getSelectCity()">
              <el-option
                v-for="item in allSelectProvince"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-select v-model="factoryQueryDto.cityCode" clearable placeholder="请选择城市">
              <el-option
                v-for="item in allSelectCity"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getFactoryDeviceList()">查询</el-button>
      </el-form-item>
    </el-form>
    <custom-table
      :data="factoryList"
      :columns="columns"
      :tableLoadingFlag="tableLoadingFlag"
      :operationColumn="operationColumn"
      :pagination="pagination">
    </custom-table>

    <el-dialog title="设备型号选择" :visible.sync="factoryDeviceBoxVisible" :close-on-click-modal="false"
               class="selectDialog" :before-close="onBtnCancel">
      <div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        </el-col>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="良品" name="good">
            <!--Table显示-->
            <custom-table
              :data="factoryGoodDeviceList"
              :columns="deviceColumns"
              :tableLoadingFlag="detailTableLoadingFlag"
              :pagination="paginationGoodDevice">
            </custom-table>
          </el-tab-pane>
          <el-tab-pane label="不良品" name="bad">
            <!--Table显示-->
            <custom-table
              :data="factoryBadDeviceList"
              :columns="deviceColumns"
              :tableLoadingFlag="detailTableLoadingFlag"
              :pagination="paginationBadDevice">
            </custom-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer">
        <el-button @click="onBtnCancel()" size="mini">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetFactoryDevice, apiGetFactoryDeviceDetail} from '@/api/repairs/factory/index'
  import {getRoleType} from '@/utils/token'
  import {apiGetFactoryList, apiGetCity} from '@/api/dictionary'

  export default {
    components: {
      CustomTable
    },
    created () {
      this.getFactoryDeviceList(this.listQuery)
      if (getRoleType() === '1') {
        this.getFactoryList()
      }
      // 省份初始化
      this.getSelectProvince()
    },
    data () {
      return {
        columns: [
          {label: '型号', name: 'model', align: 'center'},
          {label: '良品', name: 'goodDeviceSum', align: 'center'},
          {label: '不良品', name: 'badDeviceSum', align: 'center'},
          {label: '总数', name: 'totalSum', align: 'center'}
        ],
        deviceColumns: [
          {label: '型号', name: 'model', align: 'center'},
          {label: 'ystsn', name: 'ystsn', width: '300', align: 'center'},
          {label: '型号', name: 'model', align: 'center'},
          {label: '工厂', name: 'factory', align: 'center'}
        ],
        operationColumn: {
          width: '100',
          operations: [
            {name: '详情', callback: this.openFactoryDeviceBox}
          ]
        },
        // 分页信息
        pagination: this.getData(this.getFactoryDeviceList),
        // 良品分页
        paginationGoodDevice: this.getData(this.getFactoryDeviceDetailList),
        // 不良品分页
        paginationBadDevice: this.getData(this.getFactoryDeviceDetailList),
        // 角色
        roleType: getRoleType(),
        // 工厂一览查询
        factoryQueryDto: {
          factoryId: '',
          provinceCode: '',
          cityCode: ''
        },
        // 设备详情查询
        factoryDetailQueryDto: {},
        // 分页查询条件
        listQuery: {
          pageNumber: 1,
          pageSize: 10
        },
        // tab标签页
        activeName: 'good',
        // 所有省份一览选择
        allSelectProvince: [],
        // 城市一览选择
        allSelectCity: [],
        // 工厂数据一览
        factoryList: [],
        // 工厂不良品一览
        factoryBadDeviceList: [],
        // 工厂良品一览
        factoryGoodDeviceList: [],
        // 型号id
        modelId: '',
        // 工厂一览
        factoryOption: [],
        // 数据加载
        tableLoadingFlag: false,
        // 详情数据加载
        detailTableLoadingFlag: false,
        // 设备详情查看
        factoryDeviceBoxVisible: false
      }
    },
    methods: {
      // tab页切换
      handleClick () {
        if (this.activeName === 'good') {
          this.listQuery.status = 1
          this.getFactoryDeviceDetailList(this.listQuery)
        } else if (this.activeName === 'bad') {
          this.listQuery.status = 2
          this.getFactoryDeviceDetailList(this.listQuery)
        }
      },
      getFactoryList () {
        apiGetFactoryList().then(response => {
          this.factoryOption = response.data
        })
      },
      // 获取所有省份一览
      getSelectProvince () {
        apiGetCity().then(response => {
          this.allSelectProvince = response.data
        })
      },
      // 获取当前省份下所有城市一览
      getSelectCity () {
        this.factoryQueryDto.cityCode = ''
        if (this.factoryQueryDto.provinceCode === '') {
          this.allSelectCity = []
        } else {
          let listQuery = {
            province: this.factoryQueryDto.provinceCode
          }
          apiGetCity(listQuery).then(response => {
            this.allSelectCity = response.data
          })
        }
      },
      // 获取设备详情
      getFactoryDeviceDetailList (listQuery) {
        this.detailTableLoadingFlag = true
        if (listQuery !== undefined) {
          this.listQuery.pageNumber = listQuery.pageNumber
          this.listQuery.pageSize = listQuery.pageSize
        }
        this.listQuery.modelId = this.modelId
        this.listQuery.provinceCode = this.factoryQueryDto.provinceCode
        this.listQuery.cityCode = this.factoryQueryDto.cityCode
        apiGetFactoryDeviceDetail(this.listQuery).then(response => {
          if (this.activeName === 'good') {
            this.factoryGoodDeviceList = response.data
            this.paginationGoodDevice.totalRecords = response.totalRecords
          } else {
            this.factoryBadDeviceList = response.data
            this.paginationBadDevice.totalRecords = response.totalRecords
          }
          this.detailTableLoadingFlag = false
        })
      },
      // 获取工厂设备统计
      getFactoryDeviceList (listQuery) {
        this.tableLoadingFlag = true
        this.listQuery.factoryId = this.factoryQueryDto.factoryId
        this.listQuery.provinceCode = this.factoryQueryDto.provinceCode
        this.listQuery.cityCode = this.factoryQueryDto.cityCode
        if (listQuery !== undefined) {
          this.listQuery.pageNumber = listQuery.pageNumber
          this.listQuery.pageSize = listQuery.pageSize
        }
        apiGetFactoryDevice(this.listQuery).then(response => {
          this.factoryList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        })
      },
      // 打开工厂设备详细弹出框
      openFactoryDeviceBox (row) {
        this.listQuery.pageSize = 10
        this.listQuery.pageNumber = 1
        this.modelId = row.modelId
        this.factoryDeviceBoxVisible = true
        this.listQuery.status = 1
        this.getFactoryDeviceDetailList()
      },
      // 关闭弹出框
      onBtnCancel () {
        this.activeName = 'good'
        this.factoryDeviceBoxVisible = false
        this.listQuery.status = 1
        this.factoryBadDeviceList = []
        this.factoryGoodDeviceList = []
      }
    }
  }
</script>
<style lang="scss">
  .selectDialog {
    .el-dialog {
      width: 90% !important;
      /*height: 460px !important;*/
    }
  }
</style>
